<!--  -->
<template>
  <div class="box">
    <div class="title">找回密码!</div>
    <div>
      <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
        <el-step title="确定账号"></el-step>
        <el-step title="安全验证及设置密码"></el-step>
      </el-steps>
    </div>
    <div class="content">
        <!-- 第一步 -->
      <div class="one" v-if="active==0">
        <div class="itemtit">
          <i class="el-icon-info"></i>请输入需要找回密码的账户
        </div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="ms-content"
        >
          <el-form-item prop="username" class="ms-content1">
            <el-input v-model="ruleForm.username" placeholder="请输入账号" size="medium">
              <!-- <i slot="prepend" icon="el-icon-lx-people el-input__icon"></i> -->
              <i slot="prefix" class="el-input__icon el-icon-lx-people"></i>
            </el-input>
          </el-form-item>
          <div class="validation">
            <el-input
              class="wid"
              v-model="ruleForm.validation"
              placeholder="验证码"
              size="medium"
              @keyup.enter.native="next()"
            ></el-input>
            <!-- <i slot="prefix" class="el-input__icon el-icon-tickets"></i> -->
            <div slot="suffix" class="code" @click="refreshCode">
              <Sidentify :identifyCode="identifyCode" style="height:34px"></Sidentify>
            </div>
          </div>
          <div class="login-btn">
            <el-button type="primary" size="medium" @click="next()">下一步</el-button>
          </div>
        </el-form>
      </div>
      <!-- 第二步 -->
      <div class="two" v-if="active==1">
        <div class="itemtit">
          <i class="el-icon-info"></i>请验证手机号
        </div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="ms-content"
        >
          <el-form-item prop="username" class="ms-content1">
            <el-input v-model="ruleForm.phone" placeholder="手机号" disabled size="medium"></el-input>
          </el-form-item>
          <el-form-item prop="username" class="ms-content1">
            <el-input v-model="ruleForm.verifyphone" placeholder="输入手机号验证" size="medium"></el-input>
          </el-form-item>
          <div class="validation">
            <el-input
              class="wid"
              v-model="ruleForm.phonecode"
              placeholder="验证码"
              size="medium"
              @keyup.enter.native="submitForm('ruleForm')"
            ></el-input>
            <div>
              <span  v-if="!show" class="verification" >{{count}}s后获取</span>
              <span  v-if="show" class="verification" @click="getCode()">获取验证码</span>
            </div>
          </div>
          <el-form-item prop="newpassword" class="ms-content1">
            <el-input type="password" v-model="ruleForm.newpassword" maxlength="11" placeholder="请输入新密码"  size="medium"></el-input>
          </el-form-item>
          <el-form-item prop="newpasswords" class="ms-content1">
            <el-input type="password" v-model="ruleForm.newpasswords" maxlength="11" placeholder="再次输入新密码"  size="medium"></el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" size="medium" @click="ok()">完成</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Sidentify from "../page/identify";
import { getBindPhone,sms,updatepassword } from "@/api/api";
import md5 from "js-md5";
export default {
  data() {
    return {
      active: 0,
      identifyCodes: "1234567890",
      identifyCode: "",
      show: true,
      count: '',
      ruleForm: {},
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        newpassword:[{ required: true, message: "请输入密码", trigger: "blur" }],
        newpasswords:[{ required: true, message: "请再次输入密码", trigger: "blur" }],
      }
    };
  },
  components: {
    Sidentify
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCode, 4);
      // console.log("当前验证码==", this.identifyCode);
    },
    next() {
      if (this.ruleForm.username) {
        if (this.ruleForm.validation != this.identifyCode) {
          this.$message({
            showClose: true,
            message: "验证码错误",
            type: "error"
          });
        } else {
            
            getBindPhone({
                userName: this.ruleForm.username
                }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.ruleForm.phone = res.data
                    this.active = 1;
                } else {
                    this.$message({
                    showClose: true,
                    message: res.message,
                    type: "error"
                    });
                    this.refreshCode()
                    this.ruleForm.validation = ''
                }
                });
            
        }
      } else {
        this.$message({
          showClose: true,
          message: "请输入用户名",
          type: "error"
        });
      }
    },
    // 获取验证码
    getCode() {
      if(this.ruleForm.phone){
           sms({
                username: this.ruleForm.username,
                userphone: this.ruleForm.verifyphone
                }).then(res => {
                console.log(res);
                if (res.code == 200) {
                      this.$message({
                            showClose: true,
                            message: '短信已发送',
                            type: 'success'
                        });
                      const TIME_COUNT = 60;
                      if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.show = false;
                        this.timer = setInterval(() => {
                          if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                          } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                          }
                        }, 1000);
                      }
                } else {
                    this.$message({
                    showClose: true,
                    message: res.message,
                    type: "error"
                    });
                    return
                }
            });
      }
      
    },
    // 确定修改密码
    ok(){
        if(this.ruleForm.phonecode){
            if(!this.ruleForm.newpassword){
                this.$message({
                    showClose: true,
                    message: "请输入密码",
                    type: "error"
                });
                return
            }
            if(this.ruleForm.newpassword.length <6){
              this.$message({
                    showClose: true,
                    message: "密码长度不得小于6位",
                    type: "error"
                });
            }else{
                if(this.ruleForm.newpassword != this.ruleForm.newpasswords){
                    this.$message({
                    showClose: true,
                    message: "2次密码输入不一致",
                    type: "error"
                });
                }else{
                    updatepassword({
                        userName: this.ruleForm.username,
                        code: this.ruleForm.phonecode,
                        phone: this.ruleForm.verifyphone,
                        passWord: md5(this.ruleForm.newpassword)
                        }).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message({
                                    showClose: true,
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.$router.push({ path: "/Login"}) 
                        } else {
                            this.$message({
                            showClose: true,
                            message: res.message,
                            type: "error"
                            });
                        }
                    });
                }
            }
        }else{
            this.$message({
                showClose: true,
                message: "请输入验证码",
                type: "error"
            });
        }
    }
  }
};
</script>
<style  scoped>
.box {
  width: 50%;
  padding: 10% 25%;
  position: relative;
  height: 100%;
  background: #eeeeee;
}
.title {
  width: 100%;
  font-size: 20px;
}
.content {
  width: 100%;
  height: 450px;
  overflow-y: hidden;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.el-icon-info {
  color: tomato;
  margin-right: 5px;
}

.ms-content {
  padding: 30px 28%;
}
.ms-content1 {
  margin-bottom: 25px;
}
.login-btn {
  text-align: center;
  width: 100%;
}
.login-btn button {
  width: 100%;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
.validation {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.el-input__suffix {
  right: 0px !important;
}
input {
  background: #f0f0f0 !important;
}
.code {
  margin-left: 5px;
  margin-top: 2px;
}
.verification {
  cursor: pointer;
  border: 1px solid #409eff;
  padding: 0px 10px;
  display: inline-block;
  width: 90px;
  height: 36px;
  border-radius: 5px;
  text-align: center;
  line-height: 36px;
  color: #409eff;
  font-size: 14px;
}
</style>